<template>
  <a-button @click="printPage">打印网页</a-button>
  <div>
    <h2>选择用户</h2>
    <div v-for="user in users" :key="user.id" class="userItem">
      <label class="labelName">
        <input type="checkbox" v-model="selectedUsers" :value="user.id" />
        {{ user.name }}
      </label>

      <div v-if="selectedUsers.includes(user.id)">
        <h3>选择通知方式</h3>
        <div class="notionItem">
          <div v-for="(method, index) in notificationMethods" :key="index">
            <label>
              <input
                type="checkbox"
                v-model="user.selectedMethods"
                :value="method"
              />
              {{ method }}
            </label>
          </div>
        </div>
      </div>
    </div>

    <a-button @click="submit">提交</a-button>

    <pre>{{ selectedUsers }}</pre>
    <pre>{{ users }}</pre>
  </div>
</template>

<script lang="ts" setup>
// 用户列表
const users = ref<any>([
  { id: 1, name: "用户1", selectedMethods: [] },
  { id: 2, name: "用户2", selectedMethods: [] },
  { id: 3, name: "用户3", selectedMethods: [] },
]);
// 通知方式
const notificationMethods = ref(["短信", "邮件", "电话"]);
// 选中的用户
const selectedUsers = ref<any>([]);

const printPage = () => {
  window.print();
};

const submit = () => {
  // 提交选中的用户及其通知方式
  console.log("选中的用户: ", selectedUsers.value);
  console.log("每个用户的选中通知方式: ", users.value);
};
</script>

<style lang="less" scoped>
.userItem {
  border: 1px solid #ccc;
  padding: 20px;
}
.labelName {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.notionItem {
  display: flex;
  align-items: center;
  gap: 12px;
}
</style>
